<template>
  <div class="chart">
    <!-- 条件渲染 -->
    <el-button-group>
      <el-button type="primary" size="small">现有确诊</el-button>
      <el-button type="primary" size="small">累积确诊</el-button>
    </el-button-group>
    <!-- 地图 -->
    <div id="map"></div>
    <center><div id="map_jiangxi" style="width:800px;height: 500px;"></div>
    <div id="map_shanghai" style="width:800px;height: 500px;"></div>
    </center>
  
  </div>
</template>


<script>
// vue模块化，表示对外暴露当前对象
export default {
  // 1. 数据
  data() {
    return {};
  },
  // 2. 方法
  methods: {
    loadChinaMap(){
      let data = [
      { name: "北京", value: 5 },
      { name: "天津", value: 4 },
      { name: "河北", value: 3 },
      { name: "山西", value: 1 },
      { name: "内蒙古", value: 2 },
      { name: "辽宁", value: 3 },
      { name: "吉林", value: 3 },
      { name: "黑龙江", value: 2 },
      { name: "上海", value: 5 },
      { name: "江苏", value: 4 },
      { name: "浙江", value: 4 },
      { name: "安徽", value: 1 },
      { name: "福建", value: 1 },
      { name: "江西", value: 5 },
      { name: "山东", value: 2 },
      { name: "河南", value: 1 },
      { name: "湖北", value: 2 },
      { name: "湖南", value: 3 },
      { name: "广东", value: 5 },
      { name: "广西", value: 4 },
      { name: "海南", value: 6 },
      { name: "重庆", value: 3 },
      { name: "四川", value: 5 },
      { name: "贵州", value: 4 },
      { name: "云南", value: 4 },
      { name: "西藏", value: 1 },
      { name: "陕西", value: 1 },
      { name: "甘肃", value: 2 },
      { name: "青海", value: 4 },
      { name: "宁夏", value: 2 },
      { name: "新疆", value: 5 },
      { name: "台湾", value: 1 },
      { name: "香港", value: 1 },
      { name: "澳门", value: 4 },
      { name: "南海诸岛", value: 5 },
      { name: "南海诸岛", value: 5 },
    ];
      var mapdata = Highcharts.maps["cn/china"];
      var chart = Highcharts.mapChart("map", {
        title: "中国地图",
        colorAxis: {
          min: 0,
          max: 5,
          minColor: "#ffe7b8",
          maxColor: "#f04141",
        },
        series: [
          {
            mapData: mapdata,
            data,
            joinBy: "name",
            dataLabels:{
              enabled:true,
              color:"#fff",
              style:{"fontSize":"10px","fontWeight":"thin"},
              //format:`{point.name}`
            }
          },
        ],
      });
    },
    loadjiangxiMap(){
        // 随机数据
    var data = [{"name":"南昌","value":93},
                {"name":"景德镇","value":17},
                {"name":"萍乡","value":61},
                {"name":"九江","value":80},
                {"name":"新余","value":36},
                {"name":"鹰潭","value":67},
                {"name":"赣州","value":7},
                {"name":"吉安","value":41},
                {"name":"宜春","value":80},
                {"name":"抚州","value":8},
                {"name":"上饶","value":70}];
    // 初始化图表
    var mapData = Highcharts.maps["cn/jiangxi"];
    var map = new Highcharts.Map('map_jiangxi', {
      title: {
        text: '江西省'
      },
      colorAxis: {
        min: 0,
        minColor: 'rgb(255,255,255)',
        maxColor: '#f35d55'
      },
      series: [{
        data: data,
        name: '随机数据',
        mapData: Highcharts.maps['cn/jiangxi'],
        joinBy: 'name' // 根据 name 属性进行关联
      }]
    });
  },
},

  // 3. 生命周期
  // vue实例创建完毕
  created() {
    // 加载数据，并且将数据更新到data中的变量中
  },
  // 数据绑定之后 vue实例-> 虚拟dom -> 数据绑定 -> 渲染地图
  mounted() {
    this.loadChinaMap();  
    this.loadjiangxiMap();
  }
}
</script>

<style scoped>
#map {
  height: 800px;
}
#map_jiangxi{
  align-items: center;
}
</style>